<style scoped lang="less">
	img{
		height: 50px;
	}
	.part1,.part2,.part3{
		width: 200px;
		margin-bottom: 20px;
		justify-content: space-between;
		div{
			display: flex;
			margin-bottom: 20px;
			p{
				white-space: nowrap; /* 禁止换行 */
				overflow: hidden; /* 隐藏溢出内容 */
				text-overflow: ellipsis; /* 显示省略号 */
			}
		}
	}
	.orderinfo{
		margin-bottom: 20px;
	}
	:deep(.el-table .el-table__cell){
	    text-align: center !important;
	}
	// .common-layout{
	// 	background: #f2f3f5;
	// 	.el-header{
	// 		padding:0 !important;
	// 		height: 10vh;
	// 	}
	// 	.el-main{
	// 		height: 86vh;
	// 		width: 98%;
	// 		background: #fff;
	// 		margin: 10px auto;
	// 	}
	// }
</style>
<template>
	<!-- <div class="common-layout"> -->
	    <!-- <el-container> -->
			<!-- <el-header><Header></Header></el-header> -->
			<!-- <el-main> -->
				<div style="display: flex;align-items: center;margin-bottom: 20px;">
					<span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
						<el-icon><ArrowLeft /></el-icon>
						<span @click="back">返回</span>
						<span style="margin-left: 10px;">|</span>
					</span>
					<h3>订单详情</h3>
				</div>
				<!-- <div class="orderdetail"><span @click="back"><返回</span>
				<h3>订单详情</h3></div> -->
				<div class="orderinfo">订单信息</div>
				<div style="display: flex;justify-content: space-between;margin-left: 50px;">
					<div class="part1">
						<div><p>订单编号：</p><p ref="tab1"></p></div>
						<div><p>订单来源：</p><p ref="tab3"></p></div>
						<div><p>交易流水号：</p><p ref="tabcode"></p></div>
						<div><p>支付方式：</p><p ref="tabmethod"></p></div>
					</div>
					<div class="part2">
						<div><p>配送方式：</p><p ref="tab2"></p></div>
						
						<!-- <div>备注:<p ref="tab4"></p></div> -->
					</div>
					<div class="part3">
						<div><p>买家留言：</p><p>暂无</p></div>
						<div>
							<!-- 备注：<p ref="tab4"></p> -->
							<p>备注：</p>
								<el-tooltip
									class="box-item"
									effect="light"
									:content="tab4"
									placement="top"
								  >
								<p style="width: 80px; height: 20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">{{tab4}}</p>
								</el-tooltip>
						</div>
					</div>
				</div>
				
				<!-- <div class="part5">
					
				</div> -->
				<div style="margin-bottom: 20px;">订单状态</div>
				<div style="margin-bottom: 20px;margin-left: 50px;">
					<div style="display: flex;">
						<p>订单状态：</p>
						<p ref="tab5"></p>
					</div>
					<div><span style="color: red;font-size: 12px;">提醒：</span>
					<span style="font-size: 12px;">买家付款成功后，贷款将直接进入您的商户号（微信、支付宝
					<br />请及时关注你发出的包裹状态，确保可以配送至买家手中<br />
					如果卖家表示没有收到货或货物有问题，请几时联系买家处理，友好协商
					</span>
					</div>
					
				</div>
				
				<div style="margin-bottom: 20px;">商品信息</div>
				<el-table :data="tableData" style="width: 100%;display: flex;">
					<el-table-column label="商品名称" style="width: 30%;">
						<template #default="{ row }">
							<!-- <img :src="imageUrl" class="avatar" /> -->
							<img :src="downloadUrl+imageUrl" class="avatar" />
							{{row.goods_name}}
						</template>
					</el-table-column>
					<el-table-column label="价格" style="width: 30%;" >
						<template #default="{ row }">
							￥{{row.price_value}}
						</template>
					</el-table-column>
					<el-table-column prop="order_goods_num" label="数量" style="width: 30%;"></el-table-column>
				
				</el-table>
				<div class="ordorlog">订单日志</div>
				<el-timeline style="max-width: 600px;margin-left: 50px;">
				    <el-timeline-item
				      v-for="(item, index) in loglist"
				      :key="index"
				      :timestamp="item.create_time"
					  type="primary"
				    >
					{{item.user_name}}
				    {{ item.order_status_name }}
				    </el-timeline-item>
				  </el-timeline>
				
			<!-- </el-main>
	    </el-container> -->
	<!-- </div> -->
</template>

<script setup>
	import { ref,onMounted,defineEmits} from "vue";
	import Header from "@/components/Header.vue"
	import { useRouter,useRoute } from 'vue-router'
	import { downloadUrl,baseUrl } from "@/utils/request";
	import { EditPen,ArrowLeft } from '@element-plus/icons-vue'
	const imageUrl = ref('')
	let router=useRouter()
	const message = ref(true)
	const emit = defineEmits(['update-message']);
	const back=()=>{
		emit('update-message', message);
	}
	import {
		getOrderdetail,
		getOrderloglist
	} from "@/api";
	const tableData=ref([]);
	const tab1=ref(null)
	const tab2=ref(null)
	const tab3=ref(null)
	const tab4=ref(null)
	const tab5=ref(null)
	const tabcode=ref(null)
	const tabmethod=ref(null)
	const getgoodsdetail = async () => {
		let res = await getOrderdetail({	
			orderId: Number(sessionStorage.getItem("orderId"))
		})
		tableData.value = res;
		// console.log(tableData.value[0].goods_image);
		imageUrl.value=tableData.value[0].goods_image;
		// imageUrl.value=downloadUrl+imageUrl.value.split("\r\n")[1];
		// console.log(imageUrl.value);
		tab1.value.innerText=`${tableData.value[0].order_code}`
		tab2.value.innerText=`${tableData.value[0].order_delivery_name}`
		tab3.value.innerText=`${tableData.value[0].order_source_name}`
		// tab4.value.innerText=`${tableData.value[0].order_notes}`
		tab4.value=tableData.value[0].order_notes
		tab5.value.innerText=`${tableData.value[0].order_status_name}`
		tabcode.value.innerText=`${tableData.value[0].order_code}`
		tabmethod.value.innerText=`${tableData.value[0].pay_method_name}`
		// console.log(res)
	}
	let loglist=ref([])
	const getloglist = async () => {
		let res = await getOrderloglist({	
			orderId: Number(sessionStorage.getItem("orderId"))
		})
		loglist.value = res;
		// console.log(res);
	}
	
	onMounted(() => {
		getgoodsdetail()
		getloglist()
	})
</script>

